<!--
 * @Author: MrLee
 * @Date: 2024-08-24 08:55:14
 * @LastEditors: MrLee
 * @LastEditTime: 2024-08-24 11:40:26
 * @Description: 请填写简介
-->
<template>
    <custom-navbar title="职位详情" :autoBack="true" leftIconColor="#303133" />
    <up-gap height="30rpx" />
    <view class="bg-#f6f7f8 px-22rpx">
      <view
        v-for="(item, index) in jobList"
        :key="index"
        class="job-item mb-32rpx bg-#fff px-40rpx py-24rpx shadow-[0px_6px_16px_0px_rgba(191,191,191,0.26)] rounded-[20rpx]"
      >
        <view class="mb-14rpx flex items-center justify-between">
          <view class="text-left text-[32rpx] text-[#1d2129]">
            {{ item.job_name }}
          </view>
          <view
            class="text-[30rpx] text-[#1f50f2] font-semibold tracking-[-0.3rpx]"
          >
            {{item.salary_min}}k-{{item.salary_max}}k·{{item.salary_count}}薪
          </view>
        </view>
        <view
          class="mb-24rpx flex items-center text-left text-[26rpx] text-[#6e6d72] b-b b-b-#f6f7f8 b-b-solid pb-18rpx"
        >
          <view
            v-for="(itemTab, indexTab) in item.tabs"
            :key="indexTab"
            class="flex items-center justify-center"
          >
            <view :class="itemTab.ico" class="iconfont"></view>
            <view>{{ itemTab.label }}</view>
            <view
              v-if="indexTab != item.tabs.length - 1"
              class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72"
            />
          </view>
        </view>
        <view class="flex items-center b-b b-b-#f6f7f8 b-b-solid pb-18rpx">
          <view class="relative mr-[20rpx]">
            <image
              src="https://yiliao.test03.qcw800.com/static/images/tab/user-01.png"
              class="block h-[20rpx] w-[20rpx] absolute rigth-0 bottom-0;"
              style="right: 0"
            />
            <image class="w-[72rpx] h-[72rpx]" :src="item.company_logo" />
          </view>
          <view class="flex flex-col justify-between">
            <view class="text-[28rpx] font-medium text-[#1d2129]">{{
              item.company_name
            }}</view>
            <view class="text-[26rpx] font-normal text-[#666666]">
            {{item.hr_name}}·{{item.hr_duty}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="px-[22rpx]">
        <view class="py-24rpx px-24rpx flex justify-between items-center bg-#fff rounded-[20rpx]">
        <view>
            <view class="text-[#1d2129] text-[24rpx]">老师内推</view>
            <view class="text-[#6e6d72] text-[24rpx]">由老师直推校招HR</view>
        </view>
        <view @click="internalPush(jobList.value.job_id)" class="text-[#fff] bg-#1f50f2 flex justify-center w-124rpx h-50rpx rounded-26rpx items-center">求内推</view>
    </view>

    <view class="px-24rpx py-24rpx bg-#fff rounded-26rpx mt-24rpx"
    v-for="item in jobList"
    >
        <view class="text-[#1d2129] text-[26rpx] mb-22rpx">岗位亮点</view>
        <view class="flex flex-wrap">
            <view v-for="(highlight,index) in item.highlights" :key="index" class="py-10rpx mr-20rpx mb-20rpx px-24rpx text-[#F57100] text-[24rpx] bg-#fcf8e9 rounded-[28rpx]">{{ highlight }}</view>
        </view>
        <view class="text-[#1d2129] text-[26rpx] mb-22rpx">工作内容</view>
        <view class="text-[#4e4e4e] text-[24rpx]" v-html="item.job_content">
        </view>
        <view class="text-[#1d2129] text-[26rpx] mt-22rpx mb-22rpx">任职要求</view>
        <view class="text-[#4e4e4e] text-[24rpx]" v-html="item.job_requirements">
        </view>
        <view class="h-2rpx bg-#ebebeb mt-22rpx mb-22rpx"></view>
        <view class="">
            <view class="flex items-center justify-between">
                <view class="flex items-center">
                    <view class="iconfont icon-a-zu121741" style="font-size: 34rpx;"></view>
                    <view class="text-[#1d2129] text-[24rpx]">地点: </view>
                    <view class="text-[#4e5969]">{{item.province}}·{{item.city}} {{item.adress}}</view>
                </view>
                <view class="flex items-center">
                    <up-icon name="file-text-fill" size="28rpx" />
                    <text class="mt-[-3rpx] color-#7b7b7b font-700">
                    复制
                    </text>
                </view>
            </view>
            <view class="flex items-center justify-between">
                <view class="flex items-center">
                    <view class="iconfont icon-a-zu121740" style="font-size: 34rpx;"></view>
                    <view class="text-[#1d2129] text-[24rpx]">邮箱: </view>
                    <view class="text-[#4e5969]">{{item.email}}</view>
                </view>
            </view>
        </view>
    </view>
    </view>
    <up-gap height="218rpx" />
    <view class="fixed flex items-center bottom-0 h-178rpx w-[100%] bg-#fff shadow-[0px_0px_12px_0px_rgba(238,239,241,0.50)]">
    <view class="px-44rpx " style="border-right: 1px solid #d6d8e0;"
    @click="onclickUserLike(jobList.value.job_id, 0)">
        <image src="https://yiliao.test03.qcw800.com/static/images/tab/home-11.png"  style="margin:0 auto" class="block w-32rpx h-32rpx mb-10rpx"/>
        <view>不感兴趣</view>
    </view>
    <view  class="px-44rpx"
    @click="onclickUserLike(jobList.value.job_id, 1)">
        <image src="https://yiliao.test03.qcw800.com/static/images/tab/home-11.png" style="margin:0 auto" class="block w-32rpx h-32rpx mb-10rpx"/>
        <view>感兴趣</view>
    </view>
    <view class="mx-auto my-0 mt-[24rpx] h-82rpx w-[40%] rounded-[42rpx] bg-#1f50f2 text-center text-[30rpx] text-white font-medium leading-[82rpx]">
        立即沟通
    </view>
    </view>
  </template>
  <script setup lang="ts">
  // import userCatch01 from "@/static/images/tab/user-catch-01.png";
  import { userJobDetail, userJobInteractionUpdate } from "@/api/user";
  const userCatch01 = 'https://yiliao.test03.qcw800.com/static/images/tab/user-catch-01.png'
  let jobList:any = reactive({});

  let jobInfoTag = reactive(['五险一金','高温补贴','五险一金','五险一金','高温补贴','五险一金'])

  const internalPush = (job_id:number) => {
    uni.navigateTo({
      url: '/pages/common/internal-push/index?job_id='+job_id,
    });
  }

  const onclickUserLike = async (job_id:number, type: number) => {
    console.log('修改职位互动type:::', type, ' job_id:::', job_id);
    const result = await userJobInteractionUpdate({
      like: type,
      job_id: job_id,
    });
    console.log('修改职位互动result:::', result);
  }

  async function getJobDetail(job_id: number = 0) {
    let params:any = {
      job_id: job_id
    }
    let r = await userJobDetail(params);
    console.log('职位详情 res:::', r);
    let rr:any = {
      job_name: r.name,
      job_id: r.id,
      salary_min: r.salary_min,
      salary_max: r.salary_max,
      salary_count: r.salary_count,
      province: r.province.name,
      city: r.city.name,
      job_nature: r.nature,
      job_content: r.job_content,
      job_requirements: r.job_requirements,
      qualifications: '',
      highlights: r.highlights,
      company_id: r.company.id,
      company_logo: r.company.url_logo,
      company_name: r.company.name,
      company_type: r.company.type == 1 ? '民营': r.company.type == 2 ? '国企' : '合资',
      company_listed: r.company.listed == 1 ? '未上市': '上市',
      address: r.address_detail,
      like: r.like,
      hr_avatar: r.user.avatar,
      hr_name: r.user.name,
      hr_duty: r.user.hr.duty.name,
      hr_id: r.user.id,
      email: r.adress_email,
      tabs: []
    }
    let qualifications = ''
    for (let j = 0; j < r.qualifications.length; j++) {
      qualifications += r.qualifications[j] + ' '
    }
    rr.qualifications = qualifications
    rr.tabs = [
        {
          label: rr.province+"·"+rr.city,
          ico: "icon-a-zu121328_1",
        },
        {
          label: rr.job_nature,
          ico: "icon-a-zu121326_1",
        },
        {
          label: rr.qualifications,
          ico: "icon-a-zu121327_1",
        },
      ],
    jobList.value = rr;
  }

onLoad((query: any) => {
  //query.status   1看过我
  console.log('职位详情传递职位ID:::',query.job_id);
  getJobDetail(query.job_id);
});
  </script>
